<!DOCTYPE html>
<%@ page pageEncoding="UTF-8" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	 
    <title>中国电信在线交易应用框架</title>
    
	<style>
		.home-body {
			background: #fff;
		}
		
		.home-body .container-inner {
			width: 1000px;
			margin: 0 auto;
		}
		.home-body .container-inner .header-top {
			position: relative;
			background: none;
			top: auto;
			left: auto;
			border-bottom: 1px solid #eee;
		}
		.header-top {
			background: #3787dd;
			height: 60px;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
		}
		article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
			display: block;
		}
		.home-body .container-inner .header-top .branding {
			background: none;
		}
		.home-body .container-inner .header-top .branding {
			width: 160px;
		}
		.header-top .branding {
			width: 200px;
		}
		.header-top .branding {
			background: #1c6ec7;
			height: 60px;
			width: 250px;
			float: left;
		}
		.home-body .container-inner .header-top .branding a {
			background: url(images/home_logo.png) no-repeat;
		}
		.header-top .branding a {
			margin-top: 13px;
		}
		.header-top .branding a {
			display: block;
			margin: 8px 0 0 20px;
			background: url(images/logo.png) no-repeat;
			text-indent: -999em;
			width: 169px;
			height: 45px;
		}
		.animate, .btn, .close, .form-wrap.ng-hide-add, .form-wrap.ng-hide-remove, .nav a, .nav li, .nav ul, .pagination a, table td {
			-webkit-transition: all .2s linear 0s;
			transition: all .2s linear 0s;
		}
		.animate {
			-webkit-animation-duration: .5s;
			-moz-animation-duration: .5s;
			animation-duration: .5s;
			-webkit-animation-fill-mode: both;
			-moz-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		a {
			color: #337ab7;
			text-decoration: none;
		}
		a {
			background-color: transparent;
		}
		.home-body .container-inner .header-top .navbar-left {
			margin: 0;
		}
		.header-top .navbar-left {
			margin-left: 20px;
		}
		.header-top .nav {
			color: #c3dbf5;
		}
		@media (min-width: 768px)
		.navbar-left {
			float: left!important;
		}
		@media (min-width: 768px)
		.navbar-nav {
			float: left;
			margin: 0;
		}
		.navbar-nav {
			margin: 7.5px -15px;
		}
		.nav {
			padding-left: 0;
			margin-bottom: 0;
			list-style: none;
		}
		ol, ul {
			margin-bottom: 10px;
		}
		dl, ol, ul {
			margin-top: 0;
		}
		.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
			display: table;
			content: " ";
		}
		.home-body .container-inner .header-top .app-name {
			border: none;
			color: #aaa;
		}
		.header-top .app-name {
			font-size: 1.5em;
			border-right: 1px solid #367cc9;
			height: 60px;
			line-height: 60px;
			padding: 0 30px 0 15px;
		}
		@media (min-width: 768px)
		.navbar-nav>li {
			float: left;
		}
		.nav>li, .nav>li>a {
			display: block;
			position: relative;
		}
		li {
			list-style: none;
		}
		.btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
			clear: both;
		}
		.home-body .container-inner .home-container {
			margin: 20px 0 0;
		}
		.home-body .container-inner .home-container .home-slider {
			float: left;
			margin: 20px 0 0 20px;
		}
		hr, img {
			border: 0;
		}
		.btn, .btn-group, .btn-group-vertical, .caret, .checkbox-inline, .radio-inline, img, rzslider {
			vertical-align: middle;
		}
		.home-body .container-inner .home-container .home-login {
			float: left;
			width: 300px;
			border-left: 1px solid #eee;
			margin: 20px 0 0 30px;
			padding: 10px 0 0 20px;
		}
		.panel-body {
			padding: 15px 15px 10px 15px;
		}
		.form-group {
			margin-bottom: 15px;
		}
		.form-control {
			width: 100%;
			padding: 6px 12px;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 4px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		}
		.form-control, output {
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			display: block;
		}
		.btn, .btn-danger.active, .btn-danger:active, .btn-default.active, .btn-default:active, .btn-info.active, .btn-info:active, .btn-primary.active, .btn-primary:active, .btn-warning.active, .btn-warning:active, .btn.active, .btn:active, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover, .form-control, .navbar-toggle, .open>.dropdown-toggle.btn-danger, .open>.dropdown-toggle.btn-default, .open>.dropdown-toggle.btn-info, .open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-warning {
			background-image: none;
		}
		button, input, select, textarea {
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
		}
		button, input, optgroup, select, textarea {
			margin: 0;
			font: inherit;
			color: inherit;
		}
		.btn-primary, .btn-primary.active {
			color: #fff;
			background: #55acef;
			border-color: #489fe1;
		}
		.btn-block {
			display: block;
			width:100%;
		}
		.btn-primary {
			color: #fff;
			background-color: #337ab7;
			border-color: #2e6da4;
		}
		.btn {
			display: inline-block;
			padding: 6px 12px;
			margin-bottom: 0;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.42857143;
			text-align: center;
			white-space: nowrap;
			-ms-touch-action: manipulation;
			touch-action: manipulation;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			border: 1px solid transparent;
			border-radius: 4px;
		}
		 footer {
			width:1000px;
			border-top: 1px solid #eee;
			text-align: center;
			padding: 20px 0 0;
			
			color: #999;
			margin: 40px auto;
		}
		body {
			color: #666;
			font-family: Helvetica Neue,Luxi Sans,DejaVu Sans,Tahoma,Hiragino Sans GB,STHeiti,Microsoft YaHei;
			margin: 0;
			font-size: 14px;
			line-height: 1.42857143;
		}
		* {
			outline: none;
		}
		*, :after, :before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
		
		.errors {
		    border: 1px dotted #BB0000;
		    color: #BB0000;
		    padding: 12px 24px 12px 90px;
		    background: url(images/error.png) no-repeat 20px center;
		}
		#msg {
		}
		.errorDiv{
			padding:0 15px;
		}
		.hide{
			display:none;
		}
		#username,#password {
			width:100%;
			padding:6px 12px;
		}
		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			#username,#password {
				max-width:245px;
				padding:6px 12px;
			}
		}
	</style>
	
	<script type="text/javascript">

		function validate_required(field) {
			with (field) {
		  		if (value == null || value == "") {
			  		return false;
				}
		  		else {
			  		return true;
			  	}
		  	}
		}
		
		function validate_form(thisform) {
			with (thisform) {
		  		if(validate_required(username) == false) {
		  			$('#msg').hide();
		  			$('#loginBefore').removeClass('hide').html('用户名为空.');
					username.focus();
					return false;
				}
		  		
		  		if(validate_required(password) == false) {
		  			$('#msg').hide();
		  			$('#loginBefore').removeClass('hide').html('密码为空.');
					password.focus();
					return false;
				}
		  		$('#loginBefore').addClass('hide');
		  }
		}
	</script>
	<!--[if  IE ]>
		<style>
		#username,#password {
			width:226px;
			height:20px;
		}
		.home-body .container-inner .home-container .home-login {
			width:281px;
		}
		</style>
		
		<script src="js/html5.js" type="text/javascript"></script>
	<![endif]-->
	
	
</head>
<body  class="ng-scope home-body">
   <div class="container-inner ng-scope" >
		<header class="header-top ng-isolate-scope">
			<div class="branding">
				<a class="animate" href="#/">中国电信云平台</a>
			</div>
			<div class="header-body">
				<ul class="nav navbar-nav navbar-left ng-scope">
					<li class="app-name">在线交易应用框架</li>
				</ul> 
			</div>
		</header> 
		<div class="home-container clearfix ng-scope" id="login">
			<div class="home-slider"> 
				<img src="images/home_slider.png"> 
			</div>
			<form:form onsubmit="return validate_form(this)" method="post" id="fm1" commandName="${commandName}" htmlEscape="true" class="home-login ng-pristine ng-valid-username ng-valid ng-valid-password">
				
				<div class="panel-body"> 
					<div class="form-group"> 
						<form:input name="username" id="username" path="username" type="text" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-valid ng-valid-username" placeholder="用户名" autocomplete="off" htmlEscape="true" />
						<span></span> 
						<i class="ico-user2 form-control-icon"></i> 
					</div> 
					<div class="form-group"> 
						<input name="password" type="password" id="password" class="form-control ng-pristine ng-isolate-scope ng-valid ng-valid-password ng-touched" placeholder="密码"/>
					
						<i class="ico-lock2 form-control-icon"></i>
					</div>
					 
					<input type="hidden" name="lt" value="${loginTicket}" />
            		<input type="hidden" name="execution" value="${flowExecutionKey}" />
            		<input type="hidden" name="_eventId" value="submit" />
					<div class="form-group"> 
						<button name="submit" type="submit" class="btn btn-block btn-primary"> 
							<span class="ng-scope">登 录</span>
						</button> 
					</div>
				</div> 
				<div class="errorDiv">
					<form:errors path="*" id="msg" cssClass="errors" element="div" htmlEscape="false" />
					<div id="loginBefore" class="errors hide"></div> 
				</div>
			</form:form>
		</div> 
	</div>
	<footer class="ng-scope">© 2016 中国电信集团 版权所有</footer>
</body></html>